<template>
  <div class="video-content-container">
    <video
      @click.prevent="preview(message)"
      preload="metadata"
      controls
      draggable="true"
      @dragstart="dragVideo($event)"
      controlsList="nodownload"
      disablePictureInPicture
      :poster="'data:video/jpeg;base64,' + message.messageContent.thumbnail"
      :src="videoUrl + '#t=0.1'"
    />
  </div>
</template>

<script>
import Message from '../../../../../wfc/messages/message'
import { previewMM } from '../../../../../platformHelper'

export default {
  name: 'VideoMessageContentView',
  props: {
    message: {
      type: Message,
      required: true,
    },
    isInCompositeView: {
      default: false,
      type: Boolean,
      required: false,
    },
  },
  methods: {
    preview(message) {
      if (this.isInCompositeView) {
        this.$parent.previewCompositeMessage(message.messageUid)
      } else {
        previewMM(message)
      }
    },

    dragVideo(event) {
      let video = this.message.messageContent
      event.dataTransfer.setData('URL', video.remotePath)
    },
  },

  computed: {
    videoUrl() {
      if (
        this.message.messageContent.file &&
        this.message.messageContent.file.path
      ) {
        return this.message.messageContent.file
      } else {
        return this.message.messageContent.remotePath
      }
    },
  },
}
</script>

<style lang="css" scoped>
.video-content-container {
  margin: 0 10px;
  border-radius: var(--border-radius);
  border: 1px solid var(--color-border);
  overflow: hidden;
}

.video-content-container video {
  display: block;
  max-width: 200px !important;
  height: auto !important;
  border-radius: 5px;
  object-fit: scale-down;
  overflow: hidden;
}
</style>
